<template>
  <div class="footer">
            <div :class="{active:count==index}" @click="qiehuan(index)" v-for="(item,index) in footer" :key="index">
                {{item}}
            </div>
    </div>
</template>

<script>
export default {
    data(){
    return{
        count:0,
        footer: [
            '首页',
            '订单',
            '我的'
        ]
    }
},
methods:{
    qiehuan(index){
       this.count=index;
    }
}
}
</script>
<style lang="scss" scoped>
    .footer {
    
        display: flex;
        /* border: 1px solid red; */
        justify-content: space-around;
        width:100%;
        height: 25px;
        background-color: slategray;
        color: white;
    }
    
    .footer div {
        text-align: center;
        /* border: 1px solid black; */
        width: 20%;
    }
    .active{
        color: red($color: #de0d0d);
    }
</style>